import React, { useEffect, useState } from 'react'
import style from './index.module.scss'
import { Avatar } from 'antd'
import { getReviewMessage } from '@/common/api'
// import UsePaginatedHook from '@/components/ComponentHook/UsePaginatedHook'//自定义hook
import _ from 'lodash'
import UsePaginatedHook from '@/components/ComponentHook/UsePaginatedHook'
// import UseSocketHook from '@/components/ComponentHook/UseSocketHook'
import { getLs } from '@/common/common'
import { connect } from 'react-redux'
import { UserOutlined } from '@ant-design/icons'
import Common from './Common'
import { useNavigate } from 'react-router-dom'
const Translation = (props)=> {
  const [pageSize,setPageSize]=useState(10)
  const navigate = useNavigate()
  const {_id:authorId} = getLs("userInfo")
  const {
    list = [],
    setList,
    endRef
  } = UsePaginatedHook(getReviewMessage, pageSize, { authorId });
  // const { socketMessage } = UseSocketHook()
  return (
    <>
        <ul>
            {list.map((item,index)=>(
              <li key={index}  ref={list.length === index + 1?endRef:null}>
              <div className='left'>
              {!Boolean(item.avator) ? <Avatar size={64} icon={<UserOutlined />} /> :<Avatar size={64} src={`http://localhost:5000/${item.avator}`} />}
              </div>
              <div className='center'>
                <p onClick={()=>navigate(`/userDetail?sign=${item.operatorId}`)}>{item.name}</p>
                <p>评论了你的作品<span>{item.time||'--'}</span></p>
                <p>{item.text}</p>
              </div>
              <div className='right'>
                <img src={`http://localhost:5000/${item.img}`} alt="" />
              </div>
            </li>
            ))}
      </ul>
      {list.length===0&&<Common/>}
    </>
  )
}
export default  connect(state=>({
  userInfo:state.user
}
  
))(Translation)